<template>
  <div id="createRule">
    <el-dialog
      title="创建人群"
      width="500px"
      :visible.sync="dialogData.isShow"
      :before-close="labelHandleClose"
    >
      <el-form
        ref="ruleForm"
        :model="ruleForm"
        :rules="rules"
        label-width="80px"
        label-position="right"
        class="addForm"
      >
        <el-form-item label="人群名称" prop="name">
          <el-input
            v-model="ruleForm.name"
            placeholder="请输入人群名称"
            maxlength="30"
            show-word-limit
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="人群描述" prop="describe">
          <el-input
            v-model="ruleForm.describe"
            type="textarea"
            placeholder="请输入人群描述"
            maxlength="300"
            show-word-limit
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="success" plain @click="cancelLabel">
          取 消
        </el-button>
        <el-button
          type="success"
          :loading="loading"
          @click.prevent="confirmLabel('ruleForm')"
        >
          确 定
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: 'CreateRule',
  msg: '创建活动-预置用户规则-创建人群弹窗',
  props: ['dialogData'],
  data() {
    return {
      id: '', //活动id
      loading: false,
      // 表单数据
      ruleForm: {
        name: '', // 人群名称
        describe: '' //人群描述
      },
      rules: {
        name: { required: true, message: '请输入人群名称', trigger: 'blur' },
        describe: { required: true, message: '请输入人群描述', trigger: 'blur' }
      }
    }
  },
  mounted() {
    this.id = this.$route.query.id
  },
  methods: {
    labelHandleClose(done) {
      this.cancelLabel()
      done()
    },
    cancelLabel() {
      // 关闭前清空
      this.loading = false
      this.dialogData.isShow = false
    },
    confirmLabel(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.subHand()
        } else {
          return false
        }
      })
    },
    /* 提交表单-手动导入 */
    subHand() {
      //手动导入
      this.loading = true
      let url = `/activities/${this.id}/preestablish-crowds`
      let obj = { ...this.ruleForm }
      this.pubRequire(
        'post',
        url,
        obj,
        (response) => {
          this.loading = false
          this.$emit('refresh')
          this.cancelLabel()
        },
        (response) => {
          // 上传失败
          this.loading = false
          this.$message({
            message: response.message,
            type: 'warning'
          })
        }
      )
    }
  }
}
</script>
<style lang="less">
#createRule {
  .el-dialog {
    border-radius: 4px;
    .el-dialog__header {
      border-bottom: 1px solid rgba(225, 228, 233, 1);
    }
  }
}
</style>
